<template>
  <div class="app-container">
    <!-- <audio controls>
  <source src="http://ossapi.169000.net/lytest/2cc220e0-c27a-11ea-9dfb-6da8e309e0d815.mp3" type="audio/mpeg">
</audio> -->
   <div class="navlist">
    <div class="navitem" @click="changestate(item)" :class="{ active: active == item.id}" v-for="(item,index) in navlist" :key="index">{{ item.name }}</div>
   </div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="部门ID" prop="deptId">
        <el-input
          v-model="queryParams.deptId"
          placeholder="请输入部门ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户账号" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户账号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="用户邮箱" prop="email">
        <el-input
          v-model="queryParams.email"
          placeholder="请输入用户邮箱"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="请输入手机号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="头像地址" prop="avatar">
        <el-input
          v-model="queryParams.avatar"
          placeholder="请输入头像地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="queryParams.password"
          placeholder="请输入密码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户职称" prop="userTitle">
        <el-input
          v-model="queryParams.userTitle"
          placeholder="请输入用户职称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核人" prop="examineBy">
        <el-input
          v-model="queryParams.examineBy"
          placeholder="请输入审核人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核未通过原因" prop="examineFailReason">
        <el-input
          v-model="queryParams.examineFailReason"
          placeholder="请输入审核未通过原因"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="封禁时间" prop="banTime">
        <el-date-picker clearable
          v-model="queryParams.banTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择封禁时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="封禁时长" prop="banTerm">
        <el-input
          v-model="queryParams.banTerm"
          placeholder="请输入封禁时长"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="封禁次数" prop="banTimes">
        <el-input
          v-model="queryParams.banTimes"
          placeholder="请输入封禁次数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最后登录IP" prop="loginIp">
        <el-input
          v-model="queryParams.loginIp"
          placeholder="请输入最后登录IP"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最后登录时间" prop="loginDate">
        <el-date-picker clearable
          v-model="queryParams.loginDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择最后登录时间">
        </el-date-picker>
      </el-form-item>
      -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item> 
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:user:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:user:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:user:remove']"
        >删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:user:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="用户ID" align="center" prop="userId" /> -->
      <!-- <el-table-column label="部门ID" align="center" prop="deptId" /> -->
      <!-- <el-table-column label="用户账号" align="center" prop="userName" /> -->
      <el-table-column label="姓名" align="center" prop="nickName" />
      <!-- <el-table-column label="用户类型" align="center" prop="userType" /> -->
      <!-- <el-table-column label="邮箱" align="center" prop="email" /> -->
      <el-table-column label="手机号" align="center" prop="phonenumber" />
      <el-table-column label="性别" align="center" prop="sex" >
        <template slot-scope="scope">
            {{ scope.row.sex=="0"?"男":"女" }}
          </template>
      </el-table-column>
      <!-- <el-table-column label="头像地址" align="center" prop="avatar" /> -->
      <!-- <el-table-column label="密码" align="center" prop="password" /> -->
      <el-table-column label="用户角色" align="center" prop="remark" />
      <el-table-column label="用户职称" align="center" prop="userTitle" />
      <el-table-column label="审核状态" align="center" prop="examineStatus" >
        <template slot-scope="scope">
            <el-tag
              v-if="scope.row.examineStatus == 0"
              type="info"
            >待审核</el-tag>
            <el-tag
              v-if="scope.row.examineStatus == 1"
              type="success"
            >审核通过</el-tag>
            <el-tag
              v-if="scope.row.examineStatus == 2"
              type="warning"
            >审核未通过</el-tag>
            
          </template>
      </el-table-column>
      <el-table-column label="审核人" align="center" prop="examineBy" />

      <el-table-column label="备注" align="center" prop="examineFailReason" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="380px">
        <template slot-scope="scope">
  
        <div v-if="scope.row.examineStatus == 0">
          <el-button
          type="success"
          plain
          size="small"
          @click="shenhe(scope.row,'1')"
        > 通过 </el-button>
        <el-button
          type="info"
          plain
          size="small"
          @click="confirmpass(scope.row,'2')"
        > 不通过 </el-button>
        <el-button type="primary" @click="chakan(scope.row)"  icon="el-icon-view"      size="small" ></el-button>

        </div>
        <div v-if="scope.row.examineStatus == 1">
        <el-button
          type="info"
          plain
          size="small"
          @click="confirmpass(scope.row,'2')"
        > 不通过 </el-button>
        <el-button type="primary"  icon="el-icon-view"  @click="chakan(scope.row)"     size="small" ></el-button>
        </div>
        <div v-if="scope.row.examineStatus == 2">
          <el-button
          type="success"
          plain
          size="small"
          @click="shenhe(scope.row,'1')"
        > 通过 </el-button>
        <el-button type="primary"  icon="el-icon-view"  @click="chakan(scope.row)"     size="small" ></el-button>
        </div>
      
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改用户信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="部门ID" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入部门ID" />
        </el-form-item>
        <el-form-item label="用户账号" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户账号" />
        </el-form-item>
        <el-form-item label="用户昵称--真实姓名" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入用户昵称--真实姓名" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="头像地址" prop="avatar">
          <el-input v-model="form.avatar" placeholder="请输入头像地址" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="用户职称" prop="userTitle">
          <el-input v-model="form.userTitle" placeholder="请输入用户职称" />
        </el-form-item>
        <el-form-item label="审核人" prop="examineBy">
          <el-input v-model="form.examineBy" placeholder="请输入审核人" />
        </el-form-item>
        <el-form-item label="审核未通过原因" prop="examineFailReason">
          <el-input v-model="form.examineFailReason" placeholder="请输入审核未通过原因" />
        </el-form-item>
        <el-form-item label="封禁时间" prop="banTime">
          <el-date-picker clearable
            v-model="form.banTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择封禁时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="封禁时长" prop="banTerm">
          <el-input v-model="form.banTerm" placeholder="请输入封禁时长" />
        </el-form-item>
        <el-form-item label="封禁次数" prop="banTimes">
          <el-input v-model="form.banTimes" placeholder="请输入封禁次数" />
        </el-form-item>
        <el-form-item label="删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
        </el-form-item>
        <el-form-item label="最后登录IP" prop="loginIp">
          <el-input v-model="form.loginIp" placeholder="请输入最后登录IP" />
        </el-form-item>
        <el-form-item label="最后登录时间" prop="loginDate">
          <el-date-picker clearable
            v-model="form.loginDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择最后登录时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
  title="用户详情"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="handleClose">
  <el-descriptions title="" direction="vertical" :column="3" border>
  <el-descriptions-item label="姓名">{{ userinfo.nickName}}</el-descriptions-item>
  <el-descriptions-item label="角色">{{userinfo.remark }}</el-descriptions-item>
  <el-descriptions-item label="职称">{{ userinfo.userTitle }}</el-descriptions-item>
  <el-descriptions-item label="认证资料">
    <div v-for="(item,index) in detailinfo" :key="index">
      <div style="font-size: 20px;color: #333;font-weight: bold;line-height: 50px;">  {{ item.authenticationDataName }} </div>
     <el-button type="primary" @click="chakanzizhi(item.data)">查看资料</el-button>
    
    </div>
  </el-descriptions-item>
</el-descriptions>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

    <el-dialog
        title="提示"
        :visible.sync="isshenshow"
        width="30%"
        :before-close="handleCloseshen"
      >
        <span>请输入未审核通过原因</span>
        <div>
          <el-input
            v-model="reason"
            style="margin-top: 20px; width: 90%"
            placeholder="请输入原因"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleCloseshen()">取消</el-button>
          <el-button type="primary" @click="confirmbu()">确定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser,shenheapi,chakaninfo } from "@/api/system/registeredUser";

export default {
  name: "User",
  data() {
    return {
      iteminfo:"",
      state:"",
      reason:"",
      isshenshow: false,
      dialogVisible:false,
      examineFailReason:"",
      navlist:[
       {
        name:"待审核",
        id:"0"
       },
       {
        name:"已通过",
        id:"1"
       },
       {
        name:"未通过",
        id:"2"
       },
      ],
      active:"0",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户信息表格数据
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        userName: null,
        nickName: null,
        userType: null,
        email: null,
        phonenumber: null,
        sex: null,
        avatar: null,
        password: null,
        status: null,
        userTitle: null,
        examineStatus: null,
        examineBy: null,
        examineFailReason: null,
        banTime: null,
        banTerm: null,
        banTimes: null,
        loginIp: null,
        loginDate: null,
        
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户账号不能为空", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "用户昵称--真实姓名不能为空", trigger: "blur" }
        ],
      },
      detailinfo:"",
      userinfo:""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    chakanzizhi(url){
      if(url){
        window.open(url)

      }
    },
    handleClose(done) {
      this.dialogVisible=false
      },
    chakan(val){
      chakaninfo(val.userId).then(res=>{
        this.detailinfo=res.dataList
        console.log(this.detailinfo)
        this.userinfo=res.data
      })
this.dialogVisible=true
    },
    confirmbu(){
      this.reason=this.reason.replace(/\s+/g,"")
 if(this.reason){
this.examineFailReason=this.reason

this.shenhe(this.iteminfo,this.state)
 }else{
  this.$message('请填写未通过原因');
 }
    },
    handleCloseshen() {
      this.reason=""
      this.examineFailReason=""
      this.isshenshow = false
    },
    openconfirm(el, al) {
      this.reason = al
      this.isshenshow = true
      this.orderid = el
    },
    changestate(item){
 this.active=item.id
  this.getList()
    },
    shenhe(el,al){
      shenheapi({
        userId:el.userId,
        userName:el.userName,
        examineStatus:al,
        roleIds:el.roleIds,
        examineFailReason:this.examineFailReason
      }).then(res=>{
        this.getList()
        this.examineFailReason=""
        this.resson=""
        this.isshenshow=false
      }).catch(()=>{
        this.examineFailReason=""
        this.resson=""
        this.isshenshow=false
      })
    },
    confirmpass(el,al) {
      this.reason=""
      this.iteminfo=el
      this.state=al
   this.isshenshow=true
      // this.orderid = el.id
      // if (el.commentState == 2) {
      //   this.$message({
      //     type: 'success',
      //     message: '已经通过，勿重复操作。'
      //   })
      // } else {
      //   this.$confirm('您确定审核通过吗?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   })
      //     .then(() => {
      //       crudComment
      //         .edit({
      //           id: this.orderid,
      //           commentState: 2,
      //           reasonFailure: this.reason
      //         })
      //         .then((res) => {
      //           this.$message({
      //             type: 'success',
      //             message: '审核通过'
      //           })
      //           this.crud.refresh()
      //         })
      //     })
      //     .catch(() => {})
      // }
    },
    /** 查询用户信息列表 */
    getList() {
      this.loading = true;
      console.log(this.queryParams)
      this.queryParams.examineStatus=this.active
      listUser(this.queryParams).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: null,
        deptId: null,
        userName: null,
        nickName: null,
        userType: null,
        email: null,
        phonenumber: null,
        sex: null,
        avatar: null,
        password: null,
        status: null,
        userTitle: null,
        examineStatus: null,
        examineBy: null,
        examineFailReason: null,
        banTime: null,
        banTerm: null,
        banTimes: null,
        delFlag: null,
        loginIp: null,
        loginDate: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const userId = row.userId || this.ids
      getUser(userId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改用户信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId != null) {
            updateUser(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUser(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$modal.confirm('是否确认删除用户信息编号为"' + userIds + '"的数据项？').then(function() {
        return delUser(userIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/user/export', {
        ...this.queryParams
      }, `user_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scope>
.navlist{
  width: 300px;
  display:flex;
  height: 35px;
  text-align: center;
  line-height: 35px;
  font-size: 14px;
  border: 0.5px solid #dde0e7;
  margin-bottom: 30px;
  .navitem{
    width: 100px;
    border: 0.5px solid #dde0e7;
    cursor: pointer;
  }
  .active{
    background-color: #1890ff;
    color: #fff;
  }
}
</style>
